/* ===================================================================
   SEMANTIC — surface / text / border tokens (light + dark schemes)
   Mirrors Fuse's scheme-based custom properties. The light values live
   on :root so any card picks them up; add class="dark" to a container
   to opt into the dark scheme.
   =================================================================== */
:root,
.light {
  --fuse-bg-app-bar:   #ffffff;
  --fuse-bg-card:      #ffffff;
  --fuse-bg-default:   #f1f5f9; /* slate.100 */
  --fuse-bg-dialog:    #ffffff;
  --fuse-bg-hover:     rgba(148, 163, 184, 0.12); /* slate.400 / 12% */
  --fuse-bg-status-bar:#cbd5e1; /* slate.300 */

  --fuse-text-default:   #1e293b; /* slate.800 */
  --fuse-text-secondary: #64748b; /* slate.500 */
  --fuse-text-hint:      #94a3b8; /* slate.400 */
  --fuse-text-disabled:  #94a3b8; /* slate.400 */

  --fuse-border:  #e2e8f0; /* slate.200 */
  --fuse-divider: #e2e8f0; /* slate.200 */
  --fuse-icon:    #64748b; /* slate.500 */
}

.dark {
  --fuse-bg-app-bar:   #0f172a; /* slate.900 */
  --fuse-bg-card:      #1e293b; /* slate.800 */
  --fuse-bg-default:   #0f172a; /* slate.900 */
  --fuse-bg-dialog:    #1e293b; /* slate.800 */
  --fuse-bg-hover:     rgba(255, 255, 255, 0.05);
  --fuse-bg-status-bar:#0f172a;

  --fuse-text-default:   #ffffff;
  --fuse-text-secondary: #94a3b8; /* slate.400 */
  --fuse-text-hint:      #64748b; /* slate.500 */
  --fuse-text-disabled:  #475569; /* slate.600 */

  --fuse-border:  rgba(241, 245, 249, 0.12);
  --fuse-divider: rgba(241, 245, 249, 0.12);
  --fuse-icon:    #94a3b8; /* slate.400 */
}